<template>
  <div class="layout-padding">
    <el-tabs class="demo-tabs" @tab-click="handleOrderStatusClick" v-model="tab">
      <el-tab-pane label="基本信息" name="base">
        <base-info ref="BaseInfoRef"></base-info>
      </el-tab-pane>
      <el-tab-pane label="平台设置" name="platform">
        <platform-setting ref="PlatformSettingRef"></platform-setting>
      </el-tab-pane>
      <el-tab-pane label="订单设置" name="order">
        <order-setting ref="OrderSettingRef"></order-setting>
      </el-tab-pane>
      <!--			<el-tab-pane label="分销设置" name="dis">-->
      <!--				<dis-setting ref="DisSettingRef"></dis-setting>-->
      <!--			</el-tab-pane>-->
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import BaseInfo from './component/base_info.vue';
import OrderSetting from './component/order_setting.vue';
import PlatformSetting from './component/platform_setting.vue';
import type {TabPaneName} from 'element-plus';
import {onMounted, ref} from 'vue';

const BaseInfoRef = ref();
const DisSettingRef = ref();
const OrderSettingRef = ref();
const PlatformSettingRef = ref();

const tab = ref('base');

const handleOrderStatusClick = (targetName: TabPaneName) => {
  const name = targetName.props.name;
  if (name == tab.value) {
    console.log('两次点击一个内容');
  } else {
    tab.value = name;
    tapChoice(name);
  }
};

const tapChoice = (name: string) => {
  console.log("name: ", name)
  switch (name) {
    case 'base':
      BaseInfoRef.value.onChoice();
      break;
    case 'platform':
      PlatformSettingRef.value.onChoice();
      break;
    case 'order':
      OrderSettingRef.value.onChoice();
      break;
    case 'dis':
      DisSettingRef.value.onChoice();
      break;
    default:
      console.info('选择错误');
  }
};
onMounted(() => {
  tapChoice(tab.value);
})
</script>
<style scoped lang="scss"></style>
